<template>
  <v-app>
    <v-snackbar top color="error" :timeout="2000" v-model="loginFailed">
      用户名或密码错误
    </v-snackbar>
    <div class="py-12 mt-12">
      <v-img
        src="https://files-bucket.oss-cn-hangzhou.aliyuncs.com/market.png"
        aspect-ratio="4"
        contain
      ></v-img>
    </div>
    <v-form class="px-12" ref="form" v-model="valid" lazy-validation>
      <v-text-field
        v-model="username"
        :rules="nameRules"
        label="用户名"
        required
        single-line
        dense
        prepend-inner-icon="mdi-account-outline"
      >
      </v-text-field>

      <v-text-field
        v-model="password"
        :rules="emailRules"
        label="登录密码"
        required
        single-line
        dense
        prepend-inner-icon="mdi-lock-open-outline"
      >
      </v-text-field>

      <v-btn
        class="white--text mt-3"
        color="#2AB795"
        rounded
        block
        @click="login"
        :loading="submitLoading"
      >
        登录
      </v-btn>
    </v-form>
    <div class="text-center mt-3 subtitle-2" style="color: #2AB795">
      创建账号
    </div>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'Login',
  data: () => ({
    valid: true,
    username: '',
    nameRules: [(v: unknown) => !!v || '用户名不能为空'],
    password: '',
    emailRules: [(v: unknown) => !!v || '密码不能为空'],
    select: null,
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
    checkbox: false,
    loginFailed: false,
    submitLoading: false
  }),
  methods: {
    login() {
      this.submitLoading = true;
      this.$store.dispatch('login', {
        userParam: {
          username: this.username,
          password: this.password
        },
        successCallback: this.loginSuccess,
        errorCallback: this.loginError
      });
    },
    loginSuccess() {
      this.submitLoading = false;
      this.$router.push({ path: '/' });
    },
    loginError() {
      this.loginFailed = true;
      this.submitLoading = false;
    }
  }
});
</script>
